<template>
  <!-- AI 市场的布局 -->
  <view class="w-100 h-100 flex flex-column align-center flex-sub">
    <view class="scroll-box h-100 flex flex-row flex-sub" style="overflow:hidden;width: 750rpx;">
      <view :style="{
             width:searchFocusFlag ?  0 : '206.25rpx'
            }">
        <scroll-view :style="{
          height:`calc(100vh - ${scrollView_height}px)`
        }" id="height_add_scroll" :scroll-top="state.leftScrollTop" scroll-y="true" class="h-100 flex-sub">
          <view class="w-100 flex flex-row justify-end" v-for="(item,index) in all_ai_list" :key="index">
            <view id="height_add_scroll_item" :id="`b${index}`"
                  class="leftItem flex flex-row justify-between align-center" :style="{
                  background:index == state.navActive ? '#FF4206':'#FFFFFF',
                  color:index == state.navActive ? '#FFFFFF':'#000000',
                }" :class='index == state.navActive?"on":""'
                  @click='tap(index,"b"+index)'>
              <text class="item_label" :style="{
                  background:index == state.navActive ? '#FF4206':'#FFFFFF',
                  color:index == state.navActive ? '#FFFFFF':'#000000',
                }">{{ item.name }}
              </text>
              <text class="fontText ml-8" :style="{
                    color:index == state.navActive ? '#FFFFFF':'#9F9F9F',
                  }">{{ item.userCount }}
              </text>
            </view>
          </view>
        </scroll-view>
      </view>
      <view :style="{
        width:searchFocusFlag ?  '750rpx' : '543.75rpx'
      }">
        <scroll-view :style="{
          height:`calc(100vh - ${scrollView_height}px)`
        }" scroll-y="true" :scroll-into-view="state.toView">
          <!-- @scroll="scroll()" -->
          <view :id="`chat_${index}`" class="w-100" v-for="(item,index) in all_ai_list"
                :key="index">
            <view class='listw' v-if="index == state.navActive" :id="'b'+index">
              <view class="card mt-20">
                <view class="item_labels" :style="{
                  color:index== state.navActive ? '#FF4206':'#FF4206',
                  background:index== state.navActive ? 'transparent':'transparent',
                }">
                  {{ item.name }}
                </view>

                <view class="right_item" v-for="(itemn,indexn) in item.users" :key="indexn"
                      @click.stop="talkChat(itemn)">
                  <view class="flex flex-row align-center w-100">
                    <su-avatar :src="itemn.avatar"
                               :avatar-style="[setImage(60,60),{'margin-top': '20rpx','margin-left': '11rpx'}]"
                               :image-style="{width:`60rpx`}"
                               :show-border="itemn.is_follow == 1"></su-avatar>
                    <view class="flex flex-column w-full flex-sub" style="margin-top: 20rpx;margin-left: 8rpx;">
                      <view class="flex flex-row w-100 align-center justify-between">
                        <view class="fontName">{{ itemn.nickname }}</view>
                        <view class="dialogue flex flex-row align-center justify-center" style="margin-right: 11rpx;">
                          对话
                        </view>
                      </view>
                      <view class="fontText">
                        生成式人工智能｜{{ itemn.chat_count || 0 }}次｜官方
                      </view>
                    </view>
                  </view>
                  <view class="fontTexts" style="padding:0 5rpx 20rpx 40rpx;">
                    {{
                      !!itemn.bot.description ? itemn.bot.description : `我是您的${itemn.nickname}小帮手!`
                    }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!--            <view :style='"height:"+(height-heightDiv)+"rpx;"'></view>-->
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>

  import { computed, getCurrentInstance, reactive } from 'vue';
  import sheep from '@/sheep';
  import { sleep } from '@/sheep/helper';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import SuAvatar from '@/sheep/ui/su-avatar/su-avatar.vue';

  const instance = getCurrentInstance();

  const scrollView_height = computed(() => {
    let height = 0;
    height = Number(sheep.$platform.device.statusBarHeight) + 44 + uni.upx2px(115);
    return height;
  });
  const isLogin = computed(() => sheep.$store('user').isLogin);

  const state = reactive({
    leftScrollTop: 0,
    navActive: 0,
    toView: '',
  });

  const props = defineProps({
    searchFocusFlag: {
      type: [Boolean, String],
      default: false,
    },
    all_ai_list: {
      type: Array,
      default: () => [],
    },
  });

  const setImage = (width, height) => {
    return {
      height: `${height}rpx`,
      width: `${width}rpx`,
      borderRadius: '50%',
    };
  };

  const scroll = () => {
    const query = uni.createSelectorQuery().in(instance.proxy);
    let boxTop = 0;
    query.select('#height_add_scroll').boundingClientRect(info => {
      boxTop = info.top;
    }).exec();
    let arr = [];
    query.selectAll('.listw').boundingClientRect((res) => {
      res.forEach((item, index) => {
        if (item.top - boxTop <= 80) {
          arr.push({
            index,
            item,
          });
        }
      });
      tap(arr[arr.length - 1].index, arr[arr.length - 1].item.id, false);
    }).exec();
  };

  const talkChat = (info) => {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    uni.setStorageSync('chatInfo', JSON.stringify(info));
    sheep.$router.go('/pages/nc_chat/index');
  };

  const tap = (index, id, flag = true) => {
    state.navActive = index;
    if (!!flag) {
      state.toView = id;
    }
    const query = uni.createSelectorQuery().in(instance.proxy);
    let boxHeight = 0;
    query.select('#height_add_scroll').boundingClientRect(info => {
      boxHeight = info.height;
    }).exec();
    query.selectAll(`.leftItem`).boundingClientRect(info => {
      let height = info[0].height;
      let subscript = 0;
      info.forEach((item, index) => {
        if (item.id == id) {
          subscript = index;
        }
      });
      state.leftScrollTop = (height + uni.upx2px(14)) * subscript - boxHeight / 2 + 100;
    }).exec();
  };
</script>
<style scoped lang="scss">
  .leftItem {
    width: 150rpx;
    background: #35363A;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    margin: 0 9rpx 14rpx 0;
    padding: 24rpx 21rpx;
  }

  .item_label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #FFEBA3;
  }

  .fontText {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.5);
  }

  .fontTexts {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: rgba(0, 0, 0, 0.5);
  }

  .item_labels {
    width: 517rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFEBA3;
    padding: 16rpx 0 10rpx 15rpx;
    margin-bottom: 11rpx;
    border-radius: 10rpx 10rpx 0 0;
  }

  .right_item {
    width: 536rpx;
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-bottom: 11rpx;
  }

  .dialogue {
    width: 82rpx;
    height: 36rpx;
    background: #ff4206;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 22rpx;
    color: #FFFFFF;
  }

  .fontName {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
  }
</style>
